<template>
  <transition name="el-fade-in-linear">
    <div class="domain-message-box" v-if="$store.state.showMessageBox">
      <el-dialog
        :visible.sync="dialogVisible"
        custom-class="message-Box"
        :modal="false"
        :close-on-click-modal="false"
        :before-close="closeBox"
        v-dialogDrag
      >
        <el-container class="box-container" v-if="ChatList.length>0">
          <el-aside style="background-color: rgb(238, 241, 246)" width="200px" class="box-nva">
            <div class="message-Box-user-list">
              <div
                class="message-Box-user-item"
                v-for="(item,index) in ChatList"
                :key="index"
                :class="item.user_vo.id==$store.state.choseChatBox?'active':''"
                @click="choseChatBox(item)"
              >
                <div class="message-Box-user-item-left">
                  <img :src="item.user_vo.avatar" />
                </div>
                <div
                  class="message-Box-user-item-center"
                  :style="item.user_vo.bigV>0?'color:red':''"
                >{{item.user_vo.nickName}}</div>
                <div style="width: 15%;display: inline-block;overflow: hidden;vertical-align: middle;" class="bubble">
                    <el-badge v-if="item.user_vo.id!=$store.state.choseChatBox&&item.unread>0" class="mark" :value="item.unread>=100?'99+':item.unread" />
                </div>
                <div class="message-Box-user-item-right" @click="delMessageList(item,index)">
                  <i class="el-icon-close"></i>
                </div>
              </div>
            </div>
          </el-aside>
          <el-container>
            <el-main>
              <!-- 当前聊天用户 -->
              <div class="message-box-current-user-top" v-if="this.$store.state.choseChatBox!=0">
                <div
                  class="message-box-current-user"
                  v-for="(item,index) in ChatList"
                  :key="index"
                  v-if="item.user_vo.id==$store.state.choseChatBox"
                >
                  <div class="message-box-current-user-avatar">
                    <img :src="item.user_vo.avatar" />
                    <span
                      class="message-box-current-user-nickName"
                      :style="item.user_vo.bigV>0?'color:red':''"
                    >{{item.user_vo.nickName}}</span>
                  </div>
                </div>
              </div>
              <!--消息列表 -->
              <div class="message-box-msg-list" id="message-box-msg-list" v-if="this.$store.state.choseChatBox!=0">
                <div v-for="(item,index) in messageList" :key="index">
                  <div
                    v-if="item.user_vo.id==$store.getters.loginData.id"
                    class="message-item messgae-self"
                  >
                    <div class="messgae-self-right">
                      <img :src="item.user_vo.avatar" />
                    </div>
                    <div class="messgae-self-left">
                      <div
                        class="messgae-self-right-nickName"
                      >{{item.publishTime}} {{item.user_vo.nickName}}</div>
                      <div class="messgae-self-right-content">{{item.content}}</div>
                    </div>
                    <div style="clear:both;"></div>
                  </div>

                  <div v-else class="message-item messgae-otherSide">
                    <div class="messgae-otherSide-left">
                      <img :src="item.user_vo.avatar" />
                    </div>
                    <div class="messgae-otherSide-right">
                      <div
                        class="messgae-otherSide-right-nickName"
                      >{{item.user_vo.nickName}} {{item.publishTime}}</div>
                      <div class="messgae-otherSide-right-content">{{item.content}}</div>
                    </div>
                    <div style="clear:both;"></div>
                  </div>
                </div>
              </div>
              <!--消息编写区域 -->
              <div class="message-box-write-box" v-if="this.$store.state.choseChatBox!=0">
                <el-form ref="sendMessage" :model="message">
                  <el-form-item prop="content">
                    <el-input
                      type="textarea"
                      :rows="7"
                      v-model="message.content"
                      @keydown.native="keyDown"
                      @keyup.native="keyUp"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <!--发送按钮 -->
              <div class="messgae-box-buttom" v-if="this.$store.state.choseChatBox!=0">
                <span class="topic">Enter发送，Shift+Enter换行</span>
                <el-button type="primary" @click="sendMessage">
                  <i class="el-icon-s-promotion"></i>发送
                </el-button>
              </div>
              <div class="no-box-change" v-else>
                <img src="../../../../static/images/envelope.png" width="200px" height="200px" />
              </div>
              <!-- h5底部用户选择框 -->
              <div class="h5-message-Box-user-list">
                <div
                  class="h5-message-Box-user-item"
                  v-for="(item,index) in ChatList"
                  :key="index"
                  :class="item.user_vo.id==$store.state.choseChatBox?'h5-active':''"
                  @click="choseChatBox(item)"
                >
                  <div class="h5-message-Box-user-item-avatar">
                    <img :src="item.user_vo.avatar" />
                  </div>
                </div>
              </div>
            </el-main>
          </el-container>
        </el-container>
        <el-container class="box-container" v-else>
          <el-container>
            <el-main>
              <div class="no-message-list" style="text-align: center;margin-top: 20%;">
                <img src="../../../../static/images/envelope.png" width="200px" height="200px" />
              </div>
            </el-main>
          </el-container>
        </el-container>
      </el-dialog>
    </div>
  </transition>
</template>

<script>
import { fetch, post } from "../../../utils/httpRequest";
import { getCurrentDate } from "../../../utils/funcUtil";
export default {
  watch: {
    "$store.state.choseChatBox": function(value) {
      if (value != 0) {
        this.getMessageHistory(value);
      }
    }
  },
  data() {
    return {
      code_1: 0,
      code_2: 0,
      message: {
        author_id: 0,
        msg_type: 1,
        content: ""
      },
      dialogVisible: true,
      messageList: [],
      ChatList: []
    };
  },
  methods: {
    //选择窗口事件
    choseChatBox(item) {
      this.$store.state.choseChatBox = item.user_vo.id;
    },
    //关闭窗口时间
    closeBox() {
      this.$store.state.choseChatBox = 0;
      this.$store.state.showMessageBox = false;
      return true;
    },
    //按键按入时间
    keyDown(event) {
      if (event.key === "Shift") {
        this.code_1 = 1;
      }
      if (event.key === "Enter") {
        this.code_2 = 1;
      }
      if (this.code_1 == 0 && this.code_2 == 1) {
        this.sendMessage();
        event.preventDefault(); // 阻止浏览器默认换行操作
        return false;
      }
    },
    //按键弹出事件
    keyUp(event) {
      if (event.key === "Shift") {
        this.code_1 = 0;
      }
      if (event.key === "Enter") {
        this.code_2 = 0;
      }
    },
    //发送消息
    sendMessage() {
      this.message.author_id = this.$store.state.choseChatBox;
      post(this.http.message.sendMessage, this.message).then(response => {
        if (response.success) {
          this.messageList = this.messageList.concat({
            messageType: 1,
            isSystem: 0,
            content: this.message.content,
            publishTime: getCurrentDate(),
            user_vo: {
              id: this.$store.getters.loginData.id,
              nickName: this.$store.getters.loginData.nickName,
              avatar: this.$store.getters.loginData.avatar
            }
          });
          this.$refs["sendMessage"].resetFields();
          this.scrollToBottom();
        }
      });
    },
    //滚动条锁定聊天记录底部
    scrollToBottom: function() {
      this.$nextTick(() => {
        var div = document.getElementById("message-box-msg-list");
        if (div != null) {
          div.scrollTop = div.scrollHeight;
        }
      });
    },
    //拉取消息
    getMessageHistory(author_id) {
      fetch(this.http.message.getMessageHistory, {
        author_id: author_id,
        pageIndex: 1,
        pageSize: 20
      }).then(response => {
        if (response.success) {
          this.messageList = response.data.records;
          this.scrollToBottom();
        }
      });
    },
    //聊天列表
    getMessageList() {
      fetch(this.http.message.getMessageList, {}).then(response => {
        if (response.success) {
          this.ChatList = response.data;
        }
      });
    },
    //从聊天列表移除数据
    delMessageList(item, index) {
      post(this.http.message.delMessageList, {
        author_id: item.user_vo.id
      }).then(response => {
        if (response.success) {
          this.ChatList.splice(index, 1);
          this.$store.state.choseChatBox = 0;
        }
      });
    }
  },
  created() {
    //加载聊天列表
    if(this.$store.getters.loginData.islogin){
      this.getMessageList();
    }
  }
};
</script>

<style scoped>
/**
* H5端
*/
@media screen and (max-width: 500px) {
  .el-container >>> .el-aside {
    display: none;
  }
  .domain-message-box >>> .el-dialog {
    width: 100% !important;
    margin-top: 10vh !important;
  }
  .messgae-self-left {
    max-width: 260px !important;
  }
  .messgae-otherSide-right {
    max-width: 260px !important;
  }
  .h5-message-Box-user-list {
    display: block !important;
    white-space: nowrap;
    overflow: scroll;
  }
  .box-container {
    height: 615px !important;
  }
  .no-box-change,.no-message-list {
    margin-top: 40% !important;
    height: 65%;
  }
}
.bubble >>> .el-badge__content {
  background-color: #F56C6C;
  border-radius: 10px;
  color: #FFF;
  display: inline-block;
  font-size: 8px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #FFF;
  padding: 0px;
}
.no-box-change {
  text-align: center;
  margin-top: 25%;
}
.box-nva::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fb70ff;
}
.box-nva::-webkit-scrollbar {
  width: 2px;
  background-color: transparent;
  -webkit-border-radius: 100px;
}
.h5-active img {
  border: 2px solid #117bf9db;
}
.h5-message-Box-user-item {
  width: 40px;
  display: inline-block;
  margin: 5px 10px;
}
.h5-message-Box-user-item-avatar img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
  vertical-align: middle;
}
.h5-message-Box-user-list {
  display: none;
}
.box-container {
  height: 570px;
}
.el-form-item {
  margin-bottom: 0px;
}
.messgae-box-buttom {
  text-align: right;
  padding: 5px 10px;
}
.messgae-box-buttom .topic {
  font-size: 12px;
  color: #ccc;
}
.message-box-write-box >>> textarea {
  border: none;
  resize: none;
  border-top: 1px solid #ccc;
  font-family: "微软雅黑";
  font-size: 12px;
  color: black;
}
.message-box-write-box >>> textarea::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fb70ff;
}
.message-box-write-box >>> textarea::-webkit-scrollbar {
  width: 2px;
  background-color: transparent;
  -webkit-border-radius: 100px;
}
.messgae-otherSide-right-content,
.messgae-self-right-content {
  position: relative;
  line-height: 22px;
  padding: 8px 15px;
  background-color: #e2e2e2;
  border-radius: 3px;
  color: #333;
  word-break: break-all;
  display: inline-block;
}
.messgae-self-right-content {
  float: right;
}
.messgae-self-right-content::after {
  left: auto !important;
  right: -10px !important;
  border-top-color: #e2e2e2 !important;
}
.messgae-otherSide-right-content:after,
.messgae-self-right-content::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 13px;
  width: 0;
  height: 0;
  border-style: solid dashed dashed;
  border-color: #e2e2e2 transparent transparent;
  overflow: hidden;
  border-width: 10px;
}
.messgae-self-right-nickName {
  text-align: right;
}
.messgae-otherSide-right-nickName,
.messgae-self-right-nickName {
  font-size: 12px;
  white-space: nowrap;
  color: #999;
  padding-bottom: 5px;
}
.messgae-self-left {
  float: right;
  max-width: 400px;
}
.messgae-otherSide-right {
  float: left;
  max-width: 400px;
}
.messgae-self-right {
  float: right;
  margin-left: 10px;
}
.messgae-otherSide-left {
  float: left;
  margin-right: 10px;
}
.messgae-otherSide-left img,
.messgae-self-right img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.message-item {
  margin-top: 5px;
}
.message-box-msg-list::-webkit-scrollbar-thumb {
  height: 10px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fb70ff;
}
.message-box-msg-list::-webkit-scrollbar {
  width: 2px;
  background-color: transparent;
  -webkit-border-radius: 100px;
}
.message-box-msg-list {
  height: 300px;
  padding: 5px;
  overflow: scroll;
  overflow-y: scroll;
  overflow-x: hidden;
}
.message-box-current-user-nickName {
  font-family: "Courier New", Courier, monospace;
}
.message-box-current-user-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  vertical-align: middle;
  margin-right: 5px;
}
.message-box-current-user {
  margin: 5px 0px 5px 10px;
}
.message-box-current-user-avatar {
  display: inline-block;
}
.message-box-current-user-top {
  border-bottom: 1px solid #ccc;
}
.el-main {
  padding: 0px;
}
.active {
  border-left: 2px solid red;
  background: linear-gradient(45deg, #0000004f, transparent);
}
.message-Box-user-item:hover {
  border-left: 2px solid red;
  background: linear-gradient(45deg, #0000004f, transparent);
}
.message-Box-user-item:hover .message-Box-user-item-right>>>i {
  display: inline-block;
}
.message-Box-user-item {
  padding: 10px;
  background-color: rgba(87, 80, 73, 0.5);
  cursor: pointer;
}
.message-Box-user-item-center {
  font-size: 12px;
  width: 45%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.message-Box-user-item-right i{
  display: none;
}
.message-Box-user-item-right {
  display: inline-block;
  width: 10%;
  vertical-align: middle;
  background-color: #c7c7c7;
  border-radius: 100%;
  text-align: center;
}
.message-Box-user-item-left {
  width: 20%;
  display: inline-block;
}
.message-Box-user-item-left img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
  vertical-align: middle;
}
.domain-message-box >>> .el-dialog {
  width: 850px;
}
.message-box-close {
  width: 100%;
  height: 20px;
}
.domain-message-box >>> .el-dialog__header {
  padding: 0px;
  height: 20px;
}
.domain-message-box >>> .el-dialog__headerbtn {
  top: 10px;
  right: 15px;
}
.domain-message-box >>> .el-dialog__body {
  padding: 0px;
  margin-top: -19px;
  word-break: normal;
}
</style>
